<template>
  <div class="h-full">
    <n-card class="shadow-sm rounded-4px">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="计划投入日期:" label-placement="left">
              <n-date-picker
                v-model:value="range"
                type="daterange"
                clearable
                :default-time="['00:00:00', '00:00:00']"
              />
            </n-form-item>
          </n-form>
        </n-gi>
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="" label-placement="left">
              <n-button type="primary" :on-click="getFinanceLotSum">
                <template #icon><icon-mdi-map-search-outline /></template>
                查询
              </n-button>
            </n-form-item>
          </n-form>
        </n-gi>
      </n-grid>
    </n-card>
    <n-space class="w-full"></n-space>
    <n-card class="rounded-4px shadow-sm">
      <vxe-grid v-bind="LotOptions"></vxe-grid>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchFinanceLotData } from '@/service';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const LotOptions = reactive<VxeGridProps>({
  border: true,
  maxHeight: '550px',
  size: 'mini',
  showFooter: true,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'PLANRELEASEDTIME',
      title: '开始日期',
      width: '180'
    },
    {
      field: 'PLANENDTIME',
      title: '结束日期',
      width: '180'
    },
    {
      field: 'PRODUCTSPECNAME',
      title: '成品料号',
      width: '200',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'LOTNAME',
      title: '内部工单号',
      width: '200',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PLANQTY',
      title: '计划数量',
      width: '80'
    },
    {
      field: 'ACTQTY',
      title: '实际投产',
      width: '80'
    },
    {
      title: '投料数量',
      children: [
        {
          field: 'JP',
          title: '晶片',
          width: '80'
        },
        {
          field: 'JZ',
          title: '基座',
          width: '80'
        },
        {
          field: 'SG',
          title: '上盖',
          width: '80'
        },
        {
          field: 'IC',
          title: 'IC',
          width: '80'
        }
      ]
    },
    {
      title: '工序完成数',
      children: [
        {
          field: 'R01',
          title: '上片',
          width: '80'
        },
        {
          field: 'R03',
          title: '镀膜',
          width: '80'
        },
        {
          field: 'R04',
          title: '点胶',
          width: '80'
        },
        {
          field: 'R07',
          title: '微调',
          width: '80'
        },
        {
          field: 'R08',
          title: '封焊',
          width: '80'
        },
        {
          field: 'R14',
          title: '测试',
          width: '80'
        }
      ]
    },
    {
      field: 'STOCKIN',
      title: '入库数',
      width: '80'
    },
    {
      field: 'MOREQTY',
      title: '多生产数',
      width: '80'
    },
    {
      field: 'NGQTY',
      title: '不良品数',
      width: '80'
    },
    {
      title: '主材利用率',
      children: [
        {
          field: 'JPRATIO',
          title: '晶片',
          width: '80'
        },
        {
          field: 'JZRATIO',
          title: '基座',
          width: '80'
        },
        {
          field: 'SGRATIO',
          title: '上盖',
          width: '80'
        },
        {
          field: 'ICRATIO',
          title: 'IC',
          width: '80'
        }
      ]
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getFinanceLotSum = async () => {
  const result = await fetchFinanceLotData(
    dayjs(range.value[0]).format('YYYYMMDD'),
    dayjs(range.value[1]).format('YYYYMMDD')
  );
  if (result.data) {
    LotOptions.data = result.data;
  }
};
</script>
